<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
    <meta http-equiv="Content-Type" charset="utf-8">
    <title></title>

    <style type="text/css">
        html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,strong,img,ul,li,ol,dl,dt,dd,form,label,input,textarea,th,td,button { margin: 0; padding: 0;}
        body,input,textarea,select,button { font: 12px/1.5 Arial,"宋体", Verdana, sans-serif;}
        body { background: #fff; color: #333;}
        ul,ol { list-style: none;}
        h1,h2,h3,h4,h5,h6 { font-size: 100%;}
        em,strong { font-style: normal;}
        a,img,border,input { border: none;}
        a { color: #333; outline: none; text-decoration: none;}
        a:hover { color: #f76120; transition: none;}
        img { display:block}
        img,label,input { vertical-align: top;}
        :focus { outline: none;}
        button::-moz-focus-inner { border:0 none; padding:0;}
        textarea { overflow: auto; resize: none; vertical-align: top;}
        table { border-collapse: collapse; border-spacing: 0; empty-cells: show;}
        table th { padding: 4px;}
        table td { padding: 4px; word-wrap: break-word; word-break: break-all;}
        .fl { float: left;}
        .fr { float: right;}
        .hide { display: none;}
        .clear { clear: both;}
        .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
        .clearfix { zoom: 1;}
        span{display: inline-block;}
        .searchbox{position: absolute;top: 3%;left: 12%}
        #map{width:100%;height:100%;}
        .active td{
            font-weight: bold;
        }
        .seldetails{display: none;}
        .circle{
            border-radius: 50%;
            border: solid 1px silver;
            width: 35px;

            padding: 3px;
            text-align: center;
            line-height: 18px;
            max-width: 50px;
            color:white;
            opacity: 0.5
        }
        .sircle{
            border-radius: 50%;
            border: solid 1px silver;
            width: 35px;

            padding: 3px;
            text-align: center;
            line-height: 18px;
            max-width: 50px;
            color:white;
            opacity: 0.5
        }
        .progress{
            margin-bottom: 0;
        }
        .dropdown-toggle{
            background:#dff0d8;
        }
        #lifeNumber{
            position: relative;
            box-shadow: 5px 5px 10px #dff0d8;
            border-radius: 10px;
        }
        #lifeNumber tr{
            font-seize:18px;
            color: green;
        }
        #lifeNumber .lifeValue{
            font-weight: bold;
            color:grey;
        }
        .blue{
            background:#d9edf7;
            font-weight: bold;
        }
        .maptwo{
            width: 300px;
            height: 300px;
            position: absolute;right: 0;bottom: 0;
            border: 6px solid #dff0d8;

        }
        .btn-group-box{
            position: absolute;
            top: 20px;
            right: 5%;
        }
        .btn-group .btn{
            height: 35px;
            width: 160px;

        }
        .headsearch{
            position: absolute;
            top: 20px;
            left: 300px;
            width: 500px
        }
        .input-group-addon{
            cursor: pointer;
        }
        .safetips{
            position: absolute;bottom: 50%;right: 1%;
            background:rgba(255,255,255,0.2);
            border-radius: 5px;
            overflow:hidden;
        }
        .safetips div{

            font-size: 12px;
            color: #333;
            font-weight: bold;
            cursor: pointer;

        }
        .safepicone{
            background: url(http://www.haotu.net/up/1155/16/152.png) no-repeat left center;
            padding: 15px 18px;

        }
        .safepictwo{
            background: url(http://www.haotu.net/up/1155/16/151.png) no-repeat left center;
            padding: 15px 18px;

        }
        .safepicthree{
            background: url(http://www.haotu.net/up/1155/16/156.png) no-repeat left center;
            padding: 15px 18px;

        }
        .safepicfour{
            background: url(http://www.haotu.net/up/1155/16/153.png) no-repeat left center;
            padding: 15px 18px;

        }
        .infowindow{
            width:180px;height:250px;
            border:2px solid #d9edf7;
            background:rgba(255,255,255,0.5)
        }
        .infowindow div{
            display:inline-block;
            width:100%;
            font-size:12px;
            background:#dff0d8;

        }
        .infowindow p{
            line-height: 35px;
        }
        .infowindow span{
            font-weight: bold;
        }
        .spantwo{
            cursor:pointer;
            padding:0 5px;
            color:red;
        }
        .alldetail{
            display: ;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;">
<!--主地图-->
<div id="map"></div>

<!--小地图-->
<div id="maptwo" class="maptwo"></div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6ba34d19ab2e178335c4b72de804111c"></script>
<script type="text/javascript">
    (function(){
        var ctx = "http://localhost:8080/gps/";
        var provinces = [{
            "name": "无锡市",
            "center": "120.30,31.57",
            "count": 1000,
            "subDistricts": [{
                "name": "姓名2",
                "center": "120.301653,31.714511",
                "count": 100,
                "level":27,
                "intro":'描述内容病情不咋的'
            }, {
                "name": "姓名3",
                "center": "120.452127,31.679837",
                "count": 151,
                "level":73,
                "intro":'描述内容病情海阔以'
            }, {
                "name": "姓名",
                "center": "120.36787,31.601701",
                "count": 300,
                "level":91,
                "intro":'描述内容病情阔以的'
            }, {
                "name": "姓名4",
                "center": "120.514262,31.718799",
                "count": 250,
                "level":81,
                "intro":'描述内容还行吧病情'
            }, {
                "name": "姓名1",
                "center": "120.417312,31.670304",
                "count": 152,
                "level":60,
                "intro":'描述内容病情刚刚好转'
            }, {
                "name": "姓名5",
                "center": "120.328892,31.676005",
                "count": 350,
                "level":27,
                "intro":'描述内容病情有点严重'
            }, {
                "name": "姓名6",
                "center": "120.416021,31.817622",
                "count": 153,
                "level":82,
                "intro":'描述内容病情良好'
            }, {
                "name": "姓名7",
                "center": "120.441488,31.612066",
                "count": 100,
                "level":92,
                "intro":'描述内容身体非诚好'
            }, {
                "name": "姓名8",
                "center": "120.419183,31.657441",
                "count": 200,
                "level":72,
                "intro":'描述内容12341'
            }, {
                "name": "姓名8",
                "center": "120.411291,31.623093",
                "count": 250,
                "level":62,
                "intro":'描述内容12342'
            }, {
                "name": "姓名9",
                "center": "120.517051,31.651538",
                "count": 250,
                "level":91,
                "intro":'描述内容2342'
            }, {
                "name": "姓名00",
                "center": "120.547198,31.741203",
                "count": 50,
                "level":60,
                "intro":'描述内容1324242'
            }, {
                "name": "姓名09",
                "center": "120.371897,31.682728",
                "count": 100,
                "level":93,
                "intro":'描述内容12342341'
            }, {
                "name": "姓名009",
                "center": "120.307645,31.782202",
                "count": 50,
                "level":83,
                "intro":'描述内容4124234'
            }, {
                "name": "姓名1",
                "center": "120.307645,31.792222",
                "count": 50,
                "level":42,
                "intro":'描述内容12423'
            }]}];
        var map = new AMap.Map("map", {
            resizeEnable: true,
            doubleClickZoom:true,
            zoom:6
        });

        var mapOther = new AMap.Map("maptwo",{
            resizeEnable:true,
            zoom:8,
            doubleClickZoom:true,     });

        map.setCity('无锡');
        var newmarkers = []; //province见Demo引用的JS文件
        var infowindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: '<div id="infowindow_detail" class="infowindow"><div><span>姓名：</span>'+nameId+'</div><p>'+contId+'</p></div>',
            offset: new AMap.Pixel(16, -45)
        });
        function markerClick(e){
            infowindow.setContent(e.target.content);
            infowindow.open(map, e.lnglat);

        }
        for (var i = 0; i <provinces[0]['subDistricts'].length; i++) {
            var newlnglat = provinces[0]['subDistricts'][i]['center'].split(',');
            var safelevel = provinces[0]['subDistricts'][i]['level'];
            var webdress;

            var nameId=provinces[0]["subDistricts"][i]["name"];
            var contId=provinces[0]['subDistricts'][i]["intro"];
            var newmarker = new AMap.Marker({
                position: newlnglat,
                icon: ctx+"/static/img/position.png",
            });
            newmarker.content='<div class="infowindow"><div class="clearfix spantwo-box"><span class="spanone fl">姓名：</span>'+nameId+'<span class="spantwo fr">详情</span></div><p>'+contId+'</p></div>';
            AMap.event.addListener(newmarker, 'click', function(e){
                infowindow.setContent(e.target.content);
                infowindow.open(map, e.target.getPosition());
            });
            newmarkers.push(newmarker);
        };
        // 添加点聚合
        function addCluster() {
            map.plugin(["AMap.MarkerClusterer"], function() {
                var cluster = new AMap.MarkerClusterer(map, newmarkers);
            });
        };
        addCluster();

        function _clsoeInfoWindow(){
            if(map.getZoom()<13){
                //alert("1");
                infowindow.close();
            };
        }
    })()

</script>
</body>
</html>